<template>
  <view class="login-container">
    <!-- 提示登录的图标 -->
    <uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>
    <!-- 登录按钮 -->
    <button type="primary" @click="getUserInfo" class="btn-login">一键登录</button>
    <!-- 登录提示 -->
    <view class="tips-text">登录后尽享更多权益</view>
  </view>
</template>
<script>
  import { mapMutations, mapState } from 'vuex'
	export default {
		name:"my-login",
		data() {
			return {
				
			};
		},
    // computed: {
    //   // 调用 mapState 辅助方法，把 m_user 模块中的数据映射到当前用组件中使用
    //   ...mapState('m_user', ['redirectInfo']),
    // },
    methods: {
      ...mapMutations('m_user', ['updateUserInfo', 'updateToken', 'updateRedirectInfo']),
      // 获取用户资料
      async getUserInfo() {
        // 注意：最新微信的登录接口，需要调用 uni.getUserProfile 方法获取用户资料信息
        
       //  let code = ''
       //  uni.login({
       //    success: (res) => {
       //      if(res.errMsg !== "login:ok" ) return uni.$showMsg('获取登录凭证失败')
       //      code = res.code
          
       //    },
       //    fail(err) {
       //      console.log(err);
       //    }
       //  })
        
       // let userInfo = {}
       // uni.getUserProfile({
       //   desc:'获取用户信息',
       //   success:(res)=>{
       //     console.log(res);
       //     if(res.errMsg !== "getUserProfile:ok" ) return uni.$showMsg('获取用户资料失败')
       //     userInfo = res
       //     this.getToken(code,userInfo)
       //   },
       //   fail(err){
       //     console.log(err);
       //     uni.$showMsg('您拒绝了授权')
       //   }
       // })
       // this.getToken(code,data)
        
        // 1. 通过getUserProfile 这个api获取用户资料信息 （找微信服务器）
        const [err,data] =await uni.getUserProfile({
          desc:'获取用户信息'  // 必须！
        })
        if(err && err.errMsg === "getUserProfile:fail auth deny") return uni.$showMsg('您拒绝了授权')
        
        // 2. 继续 使用 uni.login 方法获取 登录凭证code信息 （找微信服务器）
        const [err2,res] =await uni.login()
        if(err2 && err2.errMsg !== "login:ok" ) return uni.$showMsg('获取登录凭证失败')
        
        // 获取token！
        this.getToken(res.code,data)
      },
      // 获取token信息
      async getToken(code,userInfo){
        // 3、 发送请求给自己的服务器，将用户资料信息和 登录凭证信息提交后台，换回token
        // const { data: loginResult } = await uni.$http.post('/api/public/v1/users/wxlogin', {
        //     code: code,  // 登录凭证
        //     encryptedData: userInfo.encryptedData,
        //     iv: userInfo.iv,
        //     rawData: userInfo.rawData,
        //     signature: userInfo.signature
        // })
        // console.log(loginResult);
        const loginResult = {
          "message": {
            "user_id": 23,
            "user_email_code": null,
            "is_active": null,
            "user_sex": "男",
            "user_qq": "",
            "user_tel": "",
            "user_xueli": "本科",
            "user_hobby": "",
            "user_introduce": null,
            "create_time": 1562221487,
            "update_time": 1562221487,
            "token": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjIzLCJpYXQiOjE1NjQ3MzAwNzksImV4cCI6MTAwMTU2NDczMDA3OH0.YPt-XeLnjV-_1ITaXGY2FhxmCe4NvXuRnRB8OMCfnPo"
          },
          "meta": {
            "msg": "登录成功",
            "status": 200
          }
        }
        if(loginResult.meta.status !== 200 ) return uni.$showMsg('登录失败')
        
        this.$store.commit('m_user/updateUserInfo',userInfo.userInfo)
        this.$store.commit('m_user/updateToken',loginResult.message.token)
        
      }
    },
	}
</script>

<style lang="scss">
.login-container {
  // 登录盒子的样式
  height: 750rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f8;
  position: relative;
  overflow: hidden;

  // 绘制登录盒子底部的半椭圆造型
  &::after {
    content: ' ';
    display: block;
    position: absolute;
    width: 100%;
    height: 40px;
    left: 0;
    bottom: 0;
    background-color: white;
    border-radius: 100%;
    transform: translateY(50%);
  }

  // 登录按钮的样式
  .btn-login {
    width: 90%;
    border-radius: 100px;
    margin: 15px 0;
    background-color: #c00000;
  }

  // 按钮下方提示消息的样式
  .tips-text {
    font-size: 12px;
    color: gray;
  }
}
</style>
